/*
  学习目标：使用React路由，实现路径跳转组件切换
  // 💥Router 负责实例化路由，整个项目中只使用一次
  // 💥Route必须放在Router之内
  // 👍使用Router组件包住所有的代码
  // 无论哪种模式(HashRouter,BrowserRouter)，我们只需要关心 路径 即可
*/
import React from 'react';
// import 引进时改名 使用 as,那么以后要切换路由模式，只需要把引进的 属性 改名即可
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
// import { HashRouter as Router, Route, Link } from 'react-router-dom';

export default class App extends React.Component {
  render() {
    // HashRouter负责路由实例化，类似 vue 中的 new Router({}),包裹住所有代码
    return (
      <div>
        <Router>
          {/* Link 组件，to属性代表要跳转的路径，类似 vue 中的 RouterLink，实现跳转 */}
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          {/* Route 组件，类似 vue 中的 对象规则和挂载点 二合一 */}
          {/* path 与vue一样，只需要写路径即可，不要写 #/home */}
          <Route path="/home" component={Home}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/Friend" component={Friend}></Route>
        </Router>
      </div>
    );
  }
}

function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
